<template>
  <div class="goods">
    <!-- 1.0 左侧商品菜单 -->
    <div class="menu-wrapper" ref="menuWrapper">
      <ul>
        <li
          v-for="(item, index) in goods"
          :key="index"
          :class="{ current: currentIndex === index }"
          @click="selectMenu(index, $event)"
          ref="menuList"
        >
          <span class="num" v-if="foodTypeCount(item) > 0">{{
            foodTypeCount(item)
          }}</span>
          <span class="item-text"
            ><span
              v-show="item.type >= 0"
              :class="supportsClassMap[item.type]"
              class="supports-icon"
            ></span
            ><span class="text"> {{ item.name }}</span>
          </span>
        </li>
      </ul>
    </div>
    <!-- 2.0 右侧商品详情 -->
    <div class="foods-wrapper" ref="foodsWrapper">
      <ul>
        <!-- 2.1 菜品类别 -->
        <li
          v-for="(item, index) in goods"
          :key="index"
          class="food-list"
          ref="foodList"
          @click="openFoodDesc()"
        >
          <div class="title">{{ item.name }}</div>
          <!-- 2.1.1 菜品详情 -->
          <ul>
            <li
              v-for="(food, i) in item.foods"
              :key="i"
              class="food-item"
              @click.stop="showFoodDesc(food, $event)"
            >
              <!-- 2.1.1.1 菜品图片 -->
              <div>
                <img
                  :src="food.icon"
                  alt="图片无法显示"
                  width="57"
                  weight="57"
                  class="food-img"
                />
              </div>
              <div class="food-content">
                <!-- 2.1.1.2 菜品名称 -->
                <div class="food-name">{{ food.name }}</div>
                <!-- 2.1.1.3 菜品描述 -->
                <div class="food-desc" v-show="food.description">
                  {{ food.description }}
                </div>
                <!-- 2.1.1.4 月销量/好评率 -->
                <div class="food-extra">
                  <span class="sellCount">月销{{ food.sellCount }}份</span>
                  <span>好评率{{ food.rating }}%</span>
                </div>
                <!-- 2.1.1.5 价格 -->
                <div class="food-price">
                  ￥{{ food.price }}
                  <span v-show="food.oldPrice" class="oldPrice"
                    >￥{{ food.oldPrice }}</span
                  >
                </div>
                <!-- 2.1.1.6 添加按键 -->
                <div class="cart-control">
                  <!-- @click="cartChange(food)" -->
                  <!-- <cartcontrol :food="food" :cart.sync="cart"></cartcontrol> -->
                  <cartcontrol :food="food"></cartcontrol>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <!-- 3.0 购物车 -->
    <shopcart />
    <!-- <cartcontent v-show="cart.length" :cart="cart" /> -->
    <!-- <cartcontent v-show="this.$store.state.cart.length" /> -->

    <!-- 4.0 商品详情页 -->
    <foodDesc
      v-if="foodshow"
      :food="foodItem"
      class="foodDesc"
      @showFoodDesc="showFoodDesc"
    />
  </div>
</template>

<script>
import foodDesc from "../components/FoodDesc/foodDesc";
import cartcontrol from "../components/ShopCart/cartcontrol";
import shopcart from "../components/ShopCart/shopcart";
import BScroll from "better-scroll";
export default {
  name: "goods",
  props: ["supportsClassMap"],
  data: () => ({
    foodshow: false,
    goods: {},
    listHeight: [],
    scrollY: 0,
    /* cart: [], */
    foodItem: {},
  }),
  components: {
    cartcontrol,
    shopcart,
    foodDesc,
  },
  // 计算属性
  computed: {
    currentIndex() {
      for (let i = 0; i < this.listHeight.length; i++) {
        let height1 = this.listHeight[i];
        let height2 = this.listHeight[i + 1];
        if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
          // 它如果不是最后一个，而且它落在了当前的这个区间，则返回当前索引
          this._followScroll(i);
          return i;
        }
      }
      return 0;
    },
    // 获取左边菜单栏右上角，加入购物车的菜品对应类别的数量
    foodTypeCount() {
      return function (goodsItem) {
        let state = this.$store.state;
        let count = 0;
        state.cart.forEach((item) => {
          for (var i = 0; i < goodsItem.foods.length; i++) {
            if (item.name === goodsItem.foods[i].name) {
              count += item.count;
            }
          }
        });
        // console.log(count);
        return count;
      };
    },
  },
  // 生命周期
  created() {
    this.getGoodsData(); // 请求数据
  },
  methods: {
    showFoodDesc(food, e) {
      // console.log(event);
      if(typeof e == "undefined")
        this.foodshow = !this.foodshow;
      else if(e.target.className != "icon-add_circle" && e.target.className != "cartcontrol" && e.target.className != "cart-count" && e.target.className != "icon-remove_circle_outline") {
        this.foodItem = food;
        this.foodshow = !this.foodshow;
      }
    },
    // ES7 请求商品数据
    async getGoodsData() {
      try {
        this.axios.get("/api/goods").then((response) => {
          // 获取到数据后，传值给本地变量，然后再传递给子组件
          this.goods = response.data;
          //console.log(response);
          this.$nextTick(() => {
            setTimeout(() => {
              // 初始化滚动对象
              this._initScroll();
              this._calculateHeight();
            }, 10);
          });
        });
      } catch (e) {
        console.error(e);
      }
    },
    // 初始化滚动对象
    _initScroll() {
      this.menuScroll = new BScroll(this.$refs.menuWrapper, {
        click: true,
      });
      this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
        click: true,
        probeType: 3, // scroll 在滚动时，实时告诉我们滚动的位置
        mouseWheel: true,
      });
      // 监听滚动的实时位置，位置信息放在pos中
      this.foodsScroll.on("scroll", (pos) => {
        // 判断滑动方向
        if (pos.y <= 0) {
          this.scrollY = Math.abs(Math.round(pos.y));
          //console.log(this.scrollY);
        }
      });
    },
    // 当点击左侧的时候，右侧变化到相应位置的实时位置
    selectMenu(index, event) {
      let foodList = this.$refs.foodList;
      let el = foodList[index];
      this.foodsScroll.scrollToElement(el, 300);
    },
    // 计算高度
    _calculateHeight() {
      let foodList = this.$refs.foodList;
      let height = 0;
      this.listHeight.push(height);
      for (let i = 0; i < foodList.length; i++) {
        let item = foodList[i];
        height += item.clientHeight;
        this.listHeight.push(height);
      }
    },
    _followScroll(index) {
      let menuList = this.$refs.menuList;
      let el = menuList[index];
      this.menuScroll.scrollToElement(el, 300, 0, -100);
    },
  },
};
</script>

<style lang="scss" scoped>
.goods {
  display: flex;
  position: absolute;
  width: 100%;
  top: 174px;
  bottom: 46px;
  overflow: hidden;
  .menu-wrapper {
    flex: 0 0 80px;
    width: 80px;
    li {
      display: table;
      position: relative;
      height: 54px;
      width: 56px;
      line-height: 14px;
      padding: 0 12px;
      font-size: 12px;
      font-weight: 200;
      color: $e-grey;
      background-color: #f3f5f7;
      border-bottom: 1px solid eleblack(0.1);
      &:last-child {
        border-bottom: none;
      }
      &.current {
        z-index: 10;
        margin-top: -1px;
        background: #fff;
        .item-text {
          color: $e-red;
          font-weight: 700;
        }
      }

      .supports-icon {
        vertical-align: middle;
        display: inline-block;
        width: 12px;
        height: 12px;
        @include supports(3, 12px 12px);
      }
      .item-text {
        display: table-cell;
        vertical-align: middle;
      }
      .num {
        z-index: 10;
        position: absolute;
        top: 0px;
        right: -4px;
        padding: 0px 4px;
        min-width: 8px;
        height: 16px;
        line-height: 16px;
        border-radius: 10px;
        text-align: center;
        font-size: 1px;
        font-weight: 500;
        color: $e-white;
        background: $e-red;
      }
    }
  }
  .foods-wrapper {
    flex: 1;
    .food-list {
      .title {
        height: 26px;
        line-height: 26px;
        color: $e-dgrey;
        background: #f3f5f7;
        border-left: 2px solid #d9dde1;
        padding-left: 14px;
        font-size: $sm-size;
      }
      .food-item {
        display: flex;
        padding-bottom: 16px;
        margin: 16px;
        border-bottom: 1px solid eleblack(0.1);
        overflow: hidden;
        &:last-child {
          border-bottom: none;
          padding-bottom: 0px;
        }
        .food-img {
          flex: 0 0 57px;
          width: 57px;
          height: 57px;
          margin-right: 8px;
        }
        .food-content {
          position: relative;
          flex: 1;
          font-size: $xs-size;
          color: $e-dgrey;
          line-height: 10px;
          .food-name {
            font-size: $md-size;
            color: eleblack(1);
            line-height: 14px;
            margin: 2px 0 8px 0;
          }
          .food-desc {
            overflow: hidden;
            line-height: 10px;
          }
          .food-extra {
            margin: 8px 0 0 0;
            .sellCount {
              margin-right: 12px;
            }
          }
          .food-price {
            font-size: $md-size;
            color: $e-red;
            font-weight: 700;
            line-height: 24px;
            .oldPrice {
              color: $e-dgrey;
              font-size: $xs-size;
              text-decoration: line-through;
            }
          }
          .cart-control {
            position: absolute;
            right: 0;
            bottom: 0px;
          }
        }
      }
    }
  }
}
</style>
